import React from 'react'
import { SearchBar, Swiper, Tabs } from '@nutui/nutui-react'
import { useState, useEffect } from 'react'
import './home.css'
import { fetchList } from '../store/index'
import { useNavigate } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'

const list = [
    'https://pic5.zhuanstatic.com/zhuanzh/6e8046c9-6dbd-4ff0-b3e1-f46395d7b33f.png',
    'https://img.zcool.cn/community/01a1d657a007a00000018c1bc6ad5f.png@1280w_1l_2o_100sh.png'
]

export default function home() {
    const [defaultValue1, setdefaultValue1] = useState(0)
    const [height, setHeight] = useState(150)
    const [scrollFlag, setScrollFlag] = useState(true)
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const [activeTabIndex, setActiveTabIndex] = useState(1);
    const state = useSelector(state => state)
    useEffect(() => {
        changeTab(1)
    }, []);

    let Tabarr = ['电子产品', '书籍', '服饰', '美妆', '玩具']

    function changeTab(key) {
        setActiveTabIndex(key);
        setScrollFlag(false);
        dispatch(fetchList({ str: Tabarr[key - 1], type: '' })); // 当选中其他标签时，请求带搜索字符串的分页数据  
    }

    return (
        <div style={{ height: '94vh', overflow: 'auto' }}>
            <div className='sear'>
                <SearchBar shape="round" maxLength={5} onInputClick={() => navigate('/Search')} />
            </div>
            <div className="pic" style={{ height: 150 }}>
                <Swiper
                    loop
                    height={height}
                    style={{
                        '--nutui-indicator-color': '#426543',
                        '--nutui-indicator-dot-color': '#426ddd',
                    }}
                    autoPlay="3000"
                    defaultValue={defaultValue1}
                    indicator
                >
                    {list.map((item, index) => {
                        return (
                            <Swiper.Item key={item}>
                                <img src={item} onClick={() => console.log(index)} alt="" />
                            </Swiper.Item>
                        )
                    })}
                </Swiper>
            </div>
            <div className="select">
                <div className="item">
                    <img src={'1.png'} />
                    <span>投取物品</span>
                </div>
                <div className="item" onClick={() => navigate('/type')}>
                    <img src={'2.png'} />
                    <span >上门回收</span>
                </div>
                <div className="item">
                    <img src={'3.png'} />
                    <span>闲置回收</span>
                </div>
                <div className="item">
                    <img src={'4.png'} />
                    <span>交易指南</span>
                </div>
            </div>
            <div className="plate">
                <div className="left">
                    <img onClick={() => navigate('/High')} src={'6.png'} className='sel' />
                    <img src={'7.png'} />
                </div>
                <div className="right">
                    <div className='top'>
                        <img src={'9.png'} className='sel' onClick={() => navigate('/Recommend')} />
                        <img src={'8.png'} />
                    </div>
                    <div className='under'>
                        <img src={'10.png'} className='sel' onClick={() => navigate('/Topic')} />
                        <img src={'11.png'} />
                    </div>
                </div>
            </div>
            <div className='tabs'>
                <Tabs
                    onChange={changeTab}
                    defaultValue={activeTabIndex}
                    activeColor='green'>
                    {['', '电子产品', '书籍', '服饰', '美妆', '玩具'].map((item, index) => (
                        <Tabs.TabPane key={index} title={item} ></Tabs.TabPane>
                    ))}
                </Tabs>
            </div>
            {
                (
                    <div className='good'>
                        {
                            state.list.map(item => (
                                <div className="list-item" key={item._id} style={{ width: '170px', marginRight: '10px' }}>
                                    <img src={item.img} />
                                    <p className='p1'>{item.title}</p>
                                    <p style={{ paddingLeft: '100px', fontWeight: 'bold' }}>{Math.floor(item.num / 10 + 11)}已收藏</p>
                                    <h3>￥{item.num}</h3>
                                </div>
                            ))
                        }
                    </div>
                )
            }
        </div>
    )
}